.bui-radio {
  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
  --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
  --icon-padding: var(--bui-radio-icon-padding, 5px);

  @iconSize: 16px;
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: var(--bui-font-family);

  &-disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  &-label-left {
    flex-direction: row-reverse;
  }

  &-label-top {
    flex-direction: column-reverse;
  }

  &-label-bottom {
    flex-direction: column;
  }

  &-input {
    opacity: 0;
    // 解决onClick触发两次的问题 & 微信文案点击选中
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
  }

  &-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--icon-padding);
    box-sizing: border-box;
  }

  &-label {
    font-size: var(--label-font-size);
    color: var(--label-color);
  }

  &-btn-icon {
    position: relative;
    display: flex;

    .bui-svg-icon {
      font-size: var(--icon-font-size);
    }

    &-outline {
      transform: scale(1);
      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

    &-contained {
      position: absolute;
      left: 0;
      transform: scale(0);
      transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
    }

    &-checked {
      .bui-radio-btn-icon-contained {
        transform: scale(1);
        transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
      }
    }
  }
}
